<script setup>
import { ref, watch, onMounted, onUnmounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { isLoggedIn, getCurrentUser, logout, apiGet } from '../utils/api.js'

const router = useRouter()
const route = useRoute()
const currentUser = ref(null)
const sidebarCollapsed = ref(false)
const showSettingsMenu = ref(false)
const isDarkMode = ref(false)
const sidebarStyle = ref('default') // default, compact, minimal

const menus = [
  {
    key: 'home',
    label: '首页',
    path: '/home',
    icon: '🏠',
    children: []
  },
  {
    key: 'sales',
    label: '销售管理',
    path: '/sales',
    icon: '📊',
    children: [
      { key: 'sales-overview', label: '销售总览', path: '/sales/overview', icon: '📈' },
      { key: 'sales-customers', label: '客户管理', path: '/sales/customers', icon: '👥' },
      { key: 'sales-orders', label: '订单管理', path: '/sales/orders', icon: '📋' },
      { key: 'sales-attachments', label: '附件管理', path: '/sales/attachments', icon: '📎' },
      { key: 'sales-return', label: '订单退货', path: '/sales/return', icon: '🔄' },
    ]
  },
  {
    key: 'procure',
    label: '采购管理',
    path: '/procure',
    icon: '🛒',
    children: [
      { key: 'procure-suppliers', label: '供应商管理', path: '/procure/suppliers', icon: '🏢' },
      { key: 'procure-purchase', label: '采购订单管理', path: '/procure/purchase', icon: '📦' },
      { key: 'procure-audit', label: '采购审核管理', path: '/procure/audit', icon: '✅' },
      { key: 'procure-return-order', label: '采购退货管理', path: '/procure/return-order', icon: '↩️' },
      { key: 'procure-return-audit', label: '退货审核管理', path: '/procure/return-audit', icon: '🔍' },
      { key: 'procure-purchase-detail', label: '采购明细', path: '/procure/purchase-detail', icon: '📋' },
      { key: 'procure-return-detail', label: '采购退货明细', path: '/procure/return-detail', icon: '📄' },
      { key: 'procure-statistics', label: '商品采购统计', path: '/procure/statistics', icon: '📊' },
    ]
  },
  {
    key: 'ware',
    label: '仓储管理',
    path: '/ware',
    icon: '🏭',
    children: [
      { key: 'ware-warehouse', label: '仓库管理', path: '/ware/warehouse', icon: '🏢' },
      { key: 'ware-inventory', label: '库存状况', path: '/ware/inventory', icon: '📊' },
      { key: 'ware-stock-count', label: '库存盘点', path: '/ware/stock-count', icon: '📝' },
      { key: 'ware-stock-count-audit', label: '盘点审核', path: '/ware/stock-count-audit', icon: '✅' },
      { key: 'ware-stock-transfer', label: '库存调拨', path: '/ware/stock-transfer', icon: '🔄' },
      { key: 'ware-transfer-audit', label: '调拨审核', path: '/ware/transfer-audit', icon: '✅' },
      { key: 'ware-in', label: '入库管理', path: '/ware/in', icon: '⬇️' },
      { key: 'ware-inbound-records', label: '入库记录', path: '/ware/inbound-records', icon: '📋' },
      { key: 'ware-out', label: '出库管理', path: '/ware/out', icon: '⬆️' },
      { key: 'ware-outbound-records', label: '出库记录', path: '/ware/outbound-records', icon: '📄' },
      { key: 'ware-inventory-stats', label: '产品库存统计', path: '/ware/inventory-stats', icon: '📄' },


    ]
  },
  {
    key: 'finance',
    label: '财务管理',
    path: '/finance',
    icon: '💰',
    children: [
      { key: 'finance-order-payment', label: '订单付款', path: '/finance/order-payment', icon: '💳' },
      { key: 'finance-manual-payment', label: '手动付款', path: '/finance/manual-payment', icon: '💸' },
      { key: 'finance-payment-approval', label: '付款审批', path: '/finance/payment-approval', icon: '✅' },
      { key: 'finance-payment-record', label: '付款记录', path: '/finance/payment-record', icon: '📝' },
      { key: 'finance-order-collection', label: '订单回款', path: '/finance/order-collection', icon: '💵' },
      { key: 'finance-collection-record', label: '收款记录', path: '/finance/collection-record', icon: '📋' },
      {
        key: 'finance-reports',
        label: '财务报表',
        path: '/finance-reports',
        icon: '📊',
        children: [
          { key: 'finance-accounts-receivable', label: '应收账款', path: '/finance/accounts-receivable', icon: '📈' },
          { key: 'finance-accounts-payable', label: '应付账款', path: '/finance/accounts-payable', icon: '📉' },
          { key: 'finance-supplier-reconciliation', label: '供应商对账单', path: '/finance/supplier-reconciliation', icon: '📊' },
          { key: 'finance-customer-reconciliation', label: '客户对账单', path: '/finance/customer-reconciliation', icon: '📊' },
        ]
      },
    ]
  },
  {
    key: 'commodity',
    label: '商品管理',
    path: '/commodity',
    icon: '🏷️',
    children: [
      { key: 'commodity-list', label: '商品档案', path: '/commodity/list', icon: '📋' },
      { key: 'commodity-category', label: '商品分类', path: '/commodity/category', icon: '📁' },
    ]
  },
  {
    key: 'retail',
    label: '零售管理',
    path: '/retail',
    icon: '🛍️',
    children: [
      { key: 'retail-outbound', label: '零售出库', path: '/retail/outbound', icon: '📤' },
      { key: 'retail-returns', label: '零售退货', path: '/retail/returns', icon: '↩️' },
      { key: 'retail-tracking', label: '订单跟踪', path: '/retail/tracking', icon: '📍' },
      { key: 'retail-products', label: '零售商品', path: '/retail/products', icon: '🏷️' },
    ]
  },
  {
    key: 'system',
    label: '系统管理',
    path: '/system',
    icon: '⚙️',
    children: [
      { key: 'system-profile', label: '个人信息', path: '/system/profile', icon: '👤' },
      { key: 'system-change-password', label: '修改密码', path: '/system/change-password', icon: '🔒' },
    ]
  }
]

const expandedKeys = ref([])

// 计算当前页面标题
const currentPageTitle = computed(() => {
  for (const menu of menus) {
    if (menu.children && menu.children.length > 0) {
      // 查找直接子菜单
      const child = menu.children.find(c => c.path === route.path)
      if (child) {
        return child.label
      }

      // 查找嵌套子菜单（财务报表的子菜单）
      for (const subMenu of menu.children) {
        if (subMenu.children && subMenu.children.length > 0) {
          const subChild = subMenu.children.find(sc => sc.path === route.path)
          if (subChild) {
            return subChild.label
          }
        }
      }
    } else if (menu.path === route.path) {
      return menu.label
    }
  }
  return '首页'
})

// 计算当前财务管理子模块标题
const currentFinanceSubTitle = computed(() => {
  if (route.path.startsWith('/finance/')) {
    for (const menu of menus) {
      if (menu.children && menu.children.length > 0) {
        const child = menu.children.find(c => c.path === route.path)
        if (child) {
          return child.label
        }
      }
    }
  }
  return ''
})

// 计算面包屑
const breadcrumbs = computed(() => {
  const crumbs = []
  for (const menu of menus) {
    if (menu.children && menu.children.length > 0) {
      // 查找直接子菜单
      const child = menu.children.find(c => c.path === route.path)
      if (child) {
        if (route.path.startsWith('/finance/')) {
          crumbs.push({ label: '财务管理', path: '/finance' })
        } else if (route.path.startsWith('/system/')) {
          crumbs.push({ label: '系统管理', path: '/system' })
        }
        crumbs.push({ label: child.label, path: child.path })
        break
      }

      // 查找嵌套子菜单（财务报表的子菜单）
      for (const subMenu of menu.children) {
        if (subMenu.children && subMenu.children.length > 0) {
          const subChild = subMenu.children.find(sc => sc.path === route.path)
          if (subChild) {
            if (route.path.startsWith('/finance/')) {
              crumbs.push({ label: '财务管理', path: '/finance' })
              crumbs.push({ label: subMenu.label, path: subMenu.path })
            }
            crumbs.push({ label: subChild.label, path: subChild.path })
            return crumbs
          }
        }
      }
    } else if (menu.path === route.path) {
      crumbs.push({ label: menu.label, path: menu.path })
      break
    }
  }
  return crumbs
})

// 检查登录状态
onMounted(() => {
  if (!isLoggedIn()) {
    router.replace('/login')
    return
  }
  currentUser.value = getCurrentUser()
})

onUnmounted(() => {
  // 清理事件监听器
})

function isExpanded(key) {
  return expandedKeys.value.includes(key)
}

function toggle(key) {
  if (isExpanded(key)) {
    expandedKeys.value = expandedKeys.value.filter(k => k !== key)
  } else {
    expandedKeys.value = [...expandedKeys.value, key]
  }
}

function ensureExpandedByRoute() {
  const seg = route.path.split('/')[1] || 'home'
  if (seg && !expandedKeys.value.includes(seg)) {
    expandedKeys.value = [...expandedKeys.value, seg]
  }

  // 如果是财务管理相关页面，确保财务管理菜单展开
  if (route.path.startsWith('/finance/')) {
    if (!expandedKeys.value.includes('finance')) {
      expandedKeys.value = [...expandedKeys.value, 'finance']
    }

    // 如果是财务报表相关页面，确保财务报表菜单也展开
    if (route.path.includes('accounts-receivable') ||
        route.path.includes('accounts-payable') ||
        route.path.includes('supplier-reconciliation') ||
        route.path.includes('customer-reconciliation')) {
      if (!expandedKeys.value.includes('finance-reports')) {
        expandedKeys.value = [...expandedKeys.value, 'finance-reports']
      }
    }
  }

  // 如果是系统管理相关页面，确保系统管理菜单展开
  if (route.path.startsWith('/system/')) {
    if (!expandedKeys.value.includes('system')) {
      expandedKeys.value = [...expandedKeys.value, 'system']
    }
  }
}

function getFinanceMenus() {
  const financeMenus = []
  for (const menu of menus) {
    if (menu.key === 'finance') {
      // 添加所有子菜单（包括有子菜单的项目）
      financeMenus.push(...menu.children)

      // 添加嵌套子菜单（财务报表的子菜单）
      for (const subMenu of menu.children) {
        if (subMenu.children && subMenu.children.length > 0) {
          financeMenus.push(...subMenu.children)
        }
      }
    }
  }
  return financeMenus
}

watch(() => route.path, () => ensureExpandedByRoute(), { immediate: true })

function go(path, isChild = false) {
  if (!isChild) return // 一级导航不跳转，只展开
  router.push(path)
}

function handleLogout() {
  logout()
}

function toggleSidebar() {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

function toggleSettingsMenu() {
  showSettingsMenu.value = !showSettingsMenu.value
}

function toggleDarkMode() {
  isDarkMode.value = !isDarkMode.value
  // 应用到document根元素
  if (isDarkMode.value) {
    document.documentElement.classList.add('dark-mode')
    localStorage.setItem('darkMode', 'true')
  } else {
    document.documentElement.classList.remove('dark-mode')
    localStorage.setItem('darkMode', 'false')
  }
}

function changeSidebarStyle(style) {
  sidebarStyle.value = style
  localStorage.setItem('sidebarStyle', style)
  showSettingsMenu.value = false
}

function resetLayout() {
  sidebarCollapsed.value = false
  isDarkMode.value = false
  sidebarStyle.value = 'default'
  document.documentElement.classList.remove('dark-mode')
  localStorage.removeItem('darkMode')
  localStorage.removeItem('sidebarStyle')
  showSettingsMenu.value = false
}

// 点击外部关闭设置菜单
function handleClickOutside(event) {
  if (showSettingsMenu.value && !event.target.closest('.settings-dropdown')) {
    showSettingsMenu.value = false
  }
}

// 获取用户详细信息
const fetchUserProfile = async () => {
  try {
    // 使用当前用户的ID，如果没有则使用默认值2
    let userId = currentUser.value?.id
    console.log('获取用户信息，用户ID:', userId)

    let response
    if (userId) {
      response = await apiGet(`/system/user/profile/${userId}`)
    } else if (currentUser.value?.username) {
      response = await apiGet(`/system/user/profile/by-username?username=${encodeURIComponent(currentUser.value.username)}`)
      if (response?.id) {
        localStorage.setItem('userId', String(response.id))
      }
    } else {
      throw new Error('无法确定当前用户')
    }
    if (response) {
      // 合并用户信息，保留原有的基本信息，添加头像、部门、职位、邮箱等
      currentUser.value = {
        ...currentUser.value,
        ...response
      }
      // 持久化头像与显示名，便于侧边栏展示
      if (currentUser.value.avatarUrl) localStorage.setItem('avatarUrl', currentUser.value.avatarUrl)
      if (currentUser.value.name) localStorage.setItem('name', currentUser.value.name)
      if (currentUser.value.email) localStorage.setItem('email', currentUser.value.email)
      if (currentUser.value.department) localStorage.setItem('department', currentUser.value.department)
      if (currentUser.value.position) localStorage.setItem('position', currentUser.value.position)
      console.log('用户信息更新成功:', currentUser.value)
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    // 如果获取失败，至少保持基本的用户信息
    if (!currentUser.value) {
      currentUser.value = {
        id: 2,
        username: 'admin',
        name: '管理员'
      }
    }
  }
}

// 处理头像更新事件
const handleAvatarUpdated = (event) => {
  if (currentUser.value && event.detail?.avatarUrl) {
    currentUser.value.avatarUrl = event.detail.avatarUrl
  }
}

// 初始化设置和事件监听
onMounted(async () => {
  if (!isLoggedIn()) {
  router.replace('/login')
    return
  }
  currentUser.value = getCurrentUser()

  // 获取用户详细信息（包括头像）
  await fetchUserProfile()

  // 恢复用户设置
  const savedDarkMode = localStorage.getItem('darkMode')
  if (savedDarkMode === 'true') {
    isDarkMode.value = true
    document.documentElement.classList.add('dark-mode')
  }

  const savedSidebarStyle = localStorage.getItem('sidebarStyle')
  if (savedSidebarStyle) {
    sidebarStyle.value = savedSidebarStyle
  }

  // 添加事件监听器
  document.addEventListener('click', handleClickOutside)

  // 监听头像更新事件
  window.addEventListener('avatarUpdated', handleAvatarUpdated)
})

// 清理事件监听器
onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
  window.removeEventListener('avatarUpdated', handleAvatarUpdated)
})
</script>

<template>
  <div class="app-layout">
    <!-- 左侧导航栏 -->
    <aside class="sidebar" :class="{
      collapsed: sidebarCollapsed,
      compact: sidebarStyle === 'compact',
      minimal: sidebarStyle === 'minimal'
    }">
      <!-- Logo区域 -->
      <div class="logo-section">
        <div class="logo-container">
          <div class="logo-icon">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="logo-text" v-show="!sidebarCollapsed">
            <div class="brand-name">元启ERP</div>
            <div class="brand-subtitle">企业资源管理系统</div>
          </div>
        </div>
      </div>

      <!-- 导航菜单 -->
      <nav class="nav-menu">
        <ul class="menu-list">
          <li v-for="m in menus" :key="m.key" class="menu-item">
            <div
              class="menu-header"
              @click="m.path === '/home' ? $router.push(m.path) : toggle(m.key)"
              :class="{ active: route.path.startsWith(m.path) }"
            >
              <div class="menu-content">
                <span class="menu-icon">{{ m.icon }}</span>
                <span class="menu-label" v-show="!sidebarCollapsed">{{ m.label }}</span>
      </div>
              <span
                class="expand-icon"
                v-if="m.children && m.children.length && !sidebarCollapsed"
                :class="{ expanded: isExpanded(m.key) }"
              >
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <polyline points="9,18 15,12 9,6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
            </div>

            <!-- 子菜单 -->
            <ul
              v-if="m.children && m.children.length && isExpanded(m.key) && !sidebarCollapsed"
              class="submenu-list"
            >
              <!-- 二级菜单项 -->
              <li
                v-for="c in m.children"
                :key="c.key"
                class="submenu-item"
                :class="{
                  active: route.path === c.path,
                  'has-children': c.children && c.children.length > 0
                }"
              >
                <!-- 有子菜单的项目 -->
                <div
                  v-if="c.children && c.children.length > 0"
                  class="submenu-header"
                  @click="toggle(c.key)"
                >
                  <span class="submenu-icon">{{ c.icon }}</span>
                  <span class="submenu-label">{{ c.label }}</span>
                  <span
                    class="submenu-expand-icon"
                    :class="{ expanded: isExpanded(c.key) }"
                  >
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <polyline points="9,18 15,12 9,6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </span>
                </div>

                <!-- 没有子菜单的项目 -->
                <div
                  v-else
                  class="submenu-content"
                  @click="go(c.path, true)"
                >
                  <span class="submenu-icon">{{ c.icon }}</span>
                  <span class="submenu-label">{{ c.label }}</span>
                </div>
              </li>

              <!-- 三级菜单项 - 与二级菜单并列显示 -->
              <template v-for="c in m.children" :key="`sub-${c.key}`">
                <template v-if="c.children && c.children.length > 0 && isExpanded(c.key)">
                  <li
                    v-for="sc in c.children"
                    :key="sc.key"
                    class="sub-submenu-item"
                    :class="{ active: route.path === sc.path }"
                    @click="go(sc.path, true)"
                  >
                    <span class="sub-submenu-icon">{{ sc.icon }}</span>
                    <span class="sub-submenu-label">{{ sc.label }}</span>
                  </li>
                </template>
              </template>
            </ul>
          </li>
        </ul>
      </nav>

      <!-- 用户信息区域 -->
      <div class="user-section" v-if="currentUser">
        <div class="user-info" v-show="!sidebarCollapsed">
          <div class="user-avatar">
            <img v-if="currentUser.avatarUrl" :src="currentUser.avatarUrl" :alt="currentUser.name || currentUser.username" />
            <span v-else>{{ currentUser.name ? currentUser.name.charAt(0) : currentUser.username.charAt(0) }}</span>
          </div>
          <div class="user-details">
            <div class="user-name">{{ currentUser.name || currentUser.username }}</div>
            <div class="user-role">{{ currentUser.department || currentUser.position || currentUser.email || currentUser.username }}</div>
          </div>
        </div>
        <button class="logout-btn" @click="handleLogout" :title="sidebarCollapsed ? '退出登录' : ''">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <polyline points="16,17 21,12 16,7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <line x1="21" y1="12" x2="9" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span v-show="!sidebarCollapsed">退出登录</span>
        </button>
      </div>
    </aside>

    <!-- 右侧主内容区域 -->
    <div class="main-content" :class="{ expanded: sidebarCollapsed }">
      <!-- 顶部头部 -->
      <header class="app-header">
        <div class="header-left">
          <button class="sidebar-toggle" @click="toggleSidebar">
            <span class="menu-icon-text">☰</span>
          </button>

          <!-- 面包屑导航 -->
          <nav class="breadcrumb">
            <ol class="breadcrumb-list">
              <li
                v-for="(crumb, index) in breadcrumbs"
                :key="crumb.path"
                class="breadcrumb-item"
                :class="{ active: index === breadcrumbs.length - 1 }"
              >
                <span>{{ crumb.label }}</span>
                <span
                  v-if="index < breadcrumbs.length - 1"
                  class="breadcrumb-separator"
                >
                  ›
                </span>
              </li>
            </ol>
          </nav>
        </div>

        <div class="header-right">
          <div class="page-title">{{ currentPageTitle }}</div>

          <!-- 头部操作按钮 -->
          <div class="header-actions">
            <div class="settings-dropdown">
              <button
                class="header-action-btn"
                title="设置"
                @click="toggleSettingsMenu"
                :class="{ active: showSettingsMenu }"
              >
                <span class="action-icon-text">⚙️</span>
              </button>

              <!-- 设置下拉菜单 -->
              <div v-if="showSettingsMenu" class="settings-menu">
                <div class="settings-header">
                  <span class="settings-title">界面设置</span>
                </div>

                <div class="settings-section">
                  <div class="setting-item">
                    <span class="setting-label">深色模式</span>
                    <button
                      class="toggle-switch"
                      :class="{ active: isDarkMode }"
                      @click="toggleDarkMode"
                    >
                      <span class="toggle-slider"></span>
                    </button>
                  </div>
                </div>

                <div class="settings-section">
                  <div class="setting-group">
                    <span class="group-label">侧边栏样式</span>
                    <div class="style-options">
                      <button
                        class="style-option"
                        :class="{ active: sidebarStyle === 'default' }"
                        @click="changeSidebarStyle('default')"
                      >
                        默认
                      </button>
                      <button
                        class="style-option"
                        :class="{ active: sidebarStyle === 'compact' }"
                        @click="changeSidebarStyle('compact')"
                      >
                        紧凑
                      </button>
                      <button
                        class="style-option"
                        :class="{ active: sidebarStyle === 'minimal' }"
                        @click="changeSidebarStyle('minimal')"
                      >
                        简约
                      </button>
                    </div>
                  </div>
                </div>

                <div class="settings-section">
                  <button class="reset-button" @click="resetLayout">
                    <span>🔄</span>
                    重置布局
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>

      <!-- 二级导航栏 -->
      <nav v-if="route.path.startsWith('/finance/')" class="sub-navigation">
        <div class="sub-nav-container">
          <div class="sub-nav-tabs">
            <router-link
              v-for="menu in getFinanceMenus()"
              :key="menu.key"
              :to="menu.path"
              class="sub-nav-tab"
              :class="{ active: route.path === menu.path }"
            >
              <span class="sub-nav-icon">{{ menu.icon }}</span>
              <span class="sub-nav-label">{{ menu.label }}</span>
            </router-link>
          </div>
        </div>
      </nav>

      <!-- 主内容区域 -->
      <main class="page-content">
        <router-view />
      </main>
  </div>

  </div>
</template>

<style scoped>
/* 全局布局 */
.app-layout {
  display: flex;
  height: 100vh;
  background: #f8fafc;
}

/* 确保导航菜单文字方向正确 */
.nav-menu,
.menu-list,
.submenu-list,
.sub-submenu-list {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.menu-item,
.submenu-item,
.sub-submenu-item {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  flex-direction: row;
}

/* 确保所有文字元素都是水平方向 */
.menu-label,
.submenu-label,
.sub-submenu-label {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: nowrap;
}

/* 左侧导航栏 */
.sidebar {
  width: 280px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: #e2e8f0;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  overflow: hidden;
}

.sidebar.collapsed {
  width: 80px;
}

/* 紧凑样式 */
.sidebar.compact {
  width: 220px;
}

.sidebar.compact .logo-section {
  padding: 16px 16px;
}

.sidebar.compact .brand-name {
  font-size: 18px;
}

.sidebar.compact .brand-subtitle {
  font-size: 11px;
}

.sidebar.compact .nav-menu {
  padding: 12px 8px;
}

.sidebar.compact .menu-header {
  padding: 10px 12px;
}

.sidebar.compact .menu-icon {
  font-size: 18px;
}

.sidebar.compact .menu-label {
  font-size: 14px;
}

.sidebar.compact .submenu-item {
  padding: 8px 12px 8px 44px;
  font-size: 13px;
}

/* 简约样式 */
.sidebar.minimal {
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  color: #374151;
}

.sidebar.minimal .logo-section {
  border-bottom: 1px solid #e2e8f0;
}

.sidebar.minimal .brand-name {
  color: #1e293b;
}

.sidebar.minimal .brand-subtitle {
  color: #64748b;
}

.sidebar.minimal .menu-header {
  color: #374151;
}

.sidebar.minimal .menu-header:hover {
  background: #f8fafc;
  color: #1e293b;
}

.sidebar.minimal .menu-header.active {
  background: #f1f5f9;
  color: #667eea;
  box-shadow: none;
}

.sidebar.minimal .submenu-item {
  color: #64748b;
}

.sidebar.minimal .submenu-item:hover {
  background: #f8fafc;
  color: #374151;
}

.sidebar.minimal .submenu-item.active {
  background: #eef2ff;
  color: #667eea;
}

.sidebar.minimal .submenu-item.active::before {
  background: #667eea;
}

.sidebar.minimal .user-info {
  background: #f8fafc;
}

.sidebar.minimal .user-name {
  color: #1e293b;
}

.sidebar.minimal .user-role {
  color: #64748b;
}

/* Logo区域 */
.logo-section {
  padding: 24px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.logo-icon svg {
  width: 24px;
  height: 24px;
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-name {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-subtitle {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
}

/* 导航菜单 */
.nav-menu {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.menu-item {
  margin: 0;
}

.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #cbd5e1;
  position: relative;
  border-left: 4px solid transparent;
}

.menu-header:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-left-color: rgba(239, 68, 68, 0.3);
}

.menu-header.active {
  background: rgba(239, 68, 68, 0.15);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  border-left-color: #ef4444;
}

.menu-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.menu-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.menu-label {
  font-size: 15px;
  font-weight: 500;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: nowrap;
}

.expand-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.expand-icon.expanded {
  transform: rotate(90deg);
}

.expand-icon svg {
  width: 16px;
  height: 16px;
}

/* 子菜单 */
.submenu-list {
  list-style: none;
  padding: 8px 0 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  width: 100%;
  box-sizing: border-box;
}

.submenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 40px;
  margin: 1px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #a1a1aa;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid transparent;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

.submenu-item:hover {
  background: rgba(59, 130, 246, 0.15);
  color: #e4e4e7;
  transform: translateX(3px);
  border-left-color: rgba(59, 130, 246, 0.6);
}

.submenu-item.active {
  background: rgba(59, 130, 246, 0.2);
  color: #ffffff;
  border-left: 3px solid #3b82f6;
}

.submenu-item.active::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background: #3b82f6;
  border-radius: 50%;
}

.submenu-icon {
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.9;
  filter: brightness(1.1);
}

.submenu-label {
  font-weight: 500;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  letter-spacing: 0.3px;
}

/* 有子菜单的子菜单项 */
.submenu-item.has-children {
  padding: 0;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  margin: 3px 0;
  border-left: 3px solid rgba(34, 197, 94, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.submenu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 40px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  width: 100%;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  background: rgba(34, 197, 94, 0.08);
}

.submenu-header:hover {
  background: rgba(34, 197, 94, 0.15);
  color: #e2e8f0;
  transform: translateX(2px);
}

.submenu-header.active {
  background: rgba(34, 197, 94, 0.25);
  color: #ffffff;
  box-shadow: 0 2px 12px rgba(34, 197, 94, 0.2);
}

.submenu-expand-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: auto;
}

.submenu-expand-icon.expanded {
  transform: rotate(90deg);
}

.submenu-expand-icon svg {
  width: 12px;
  height: 12px;
}

.submenu-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  width: 100%;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.submenu-content:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  border-left-color: rgba(59, 130, 246, 0.3);
}

.submenu-content.active {
  background: rgba(59, 130, 246, 0.2);
  color: #ffffff;
  border-left-color: #3b82f6;
}

/* 三级菜单项样式 - 继承上级样式 */

.sub-submenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 80px;
  margin: 1px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #d1d5db;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  background: transparent;
  border-left: 2px solid transparent;
  width: calc(100% - 20px);
  box-sizing: border-box;
  max-width: calc(100% - 20px);
  overflow: hidden;
}

.sub-submenu-item:hover {
  background: rgba(245, 158, 11, 0.12);
  color: #fef3c7;
  transform: translateX(3px);
  border-left-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.sub-submenu-item.active {
  background: rgba(245, 158, 11, 0.2);
  color: #ffffff;
  border-left: 3px solid #f59e0b;
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.3);
}

.sub-submenu-item.active::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background: #f59e0b;
  border-radius: 50%;
}

.sub-submenu-icon {
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.9;
  filter: brightness(1.1);
}

.sub-submenu-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  letter-spacing: 0.3px;
}

/* 用户信息区域 */
.user-section {
  padding: 20px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.user-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.user-role {
  font-size: 12px;
  color: #94a3b8;
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: #fca5a5;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
}

.logout-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ffffff;
  border-color: rgba(239, 68, 68, 0.4);
}

.logout-btn svg {
  width: 18px;
  height: 18px;
}

/* 右侧主内容区域 */
.main-content {
  flex: 1;
  margin-left: 280px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 100vh;
}

.main-content.expanded {
  margin-left: 80px;
}

/* 顶部头部 */
.app-header {
  height: 70px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.sidebar-toggle {
  width: 40px;
  height: 40px;
  border: none;
  background: #f8fafc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64748b;
  position: relative;
}

.sidebar-toggle:hover {
  background: #e2e8f0;
  color: #334155;
}

.sidebar-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.menu-icon-text {
  font-size: 18px;
  font-weight: normal;
  color: currentColor;
}

/* 面包屑导航 */
.breadcrumb {
  display: flex;
  align-items: center;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
}

.breadcrumb-item.active {
  color: #334155;
  font-weight: 500;
}

.breadcrumb-separator {
  color: #cbd5e1;
  font-size: 14px;
  margin: 0 4px;
}

/* 头部右侧 */
.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-action-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: #f8fafc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64748b;
  position: relative;
}

.header-action-btn:hover {
  background: #e2e8f0;
  color: #334155;
}

.header-action-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.action-icon-text {
  font-size: 18px;
  font-weight: normal;
  color: currentColor;
}

.header-action-btn.active {
  background: #667eea;
  color: white;
}

/* 设置下拉菜单 */
.settings-dropdown {
  position: relative;
}

.settings-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid #e2e8f0;
  z-index: 1000;
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid #f1f5f9;
}

.settings-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.settings-section {
  padding: 12px 0;
}

.settings-section:not(:last-child) {
  border-bottom: 1px solid #f1f5f9;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
}

.setting-label {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

/* 切换开关 */
.toggle-switch {
  width: 44px;
  height: 24px;
  background: #cbd5e1;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.toggle-switch.active {
  background: #667eea;
}

.toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-switch.active .toggle-slider {
  transform: translateX(20px);
}

/* 样式选项组 */
.setting-group {
  padding: 12px 20px;
}

.group-label {
  display: block;
  font-size: 14px;
  color: #374151;
  font-weight: 500;
  margin-bottom: 8px;
}

.style-options {
  display: flex;
  gap: 8px;
}

.style-option {
  flex: 1;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.style-option:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.style-option.active {
  background: #667eea;
  border-color: #667eea;
  color: white;
}

/* 重置按钮 */
.reset-button {
  width: calc(100% - 40px);
  margin: 0 20px 8px;
  padding: 10px 16px;
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.reset-button:hover {
  background: #fecaca;
  border-color: #fca5a5;
}

/* 二级导航栏 */
.sub-navigation {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.sub-nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.sub-nav-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0;
}

.sub-nav-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  text-decoration: none;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}

.sub-nav-tab:hover {
  background: #f1f5f9;
  color: #374151;
  border-color: #e2e8f0;
}

.sub-nav-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.sub-nav-icon {
  font-size: 16px;
}

.sub-nav-label {
  font-weight: 500;
}

/* 主内容区域 */
.page-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: #f8fafc;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .sidebar {
    width: 280px;
    transform: translateX(-100%);
  }

  .sidebar.collapsed {
    transform: translateX(0);
    width: 80px;
  }

  .main-content {
    margin-left: 0;
  }

  .main-content.expanded {
    margin-left: 80px;
  }
}

@media (max-width: 768px) {
  .app-header {
    padding: 0 16px;
  }

  .header-right .page-title {
    display: none;
  }

  .page-content {
    padding: 16px;
  }

  .breadcrumb {
    display: none;
  }

  .sub-nav-container {
    padding: 0 16px;
  }

  .sub-nav-tabs {
    gap: 4px;
  }

  .sub-nav-tab {
    padding: 8px 12px;
    font-size: 12px;
  }

  .sub-nav-icon {
    font-size: 14px;
  }

  .sub-submenu-item {
    padding: 6px 12px 6px 60px;
    font-size: 12px;
  }

  .sub-submenu-icon {
    font-size: 12px;
    width: 12px;
  }
}

/* 滚动条样式 */
.nav-menu::-webkit-scrollbar {
  width: 6px;
}

.nav-menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.nav-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.nav-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 动画效果 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.submenu-list {
  animation: slideIn 0.2s ease-out;
}

/* 深色模式支持 */
.dark-mode .app-layout {
  background: #0f172a;
}

.dark-mode .app-header {
  background: #1e293b;
  border-bottom-color: #334155;
  color: #e2e8f0;
}

.dark-mode .page-title {
  color: #e2e8f0;
}

.dark-mode .breadcrumb-item {
  color: #94a3b8;
}

.dark-mode .breadcrumb-item.active {
  color: #e2e8f0;
}

.dark-mode .sidebar-toggle {
  background: #334155;
  color: #94a3b8;
}

.dark-mode .sidebar-toggle:hover {
  background: #475569;
  color: #e2e8f0;
}

.dark-mode .header-action-btn {
  background: #334155;
  color: #94a3b8;
}

.dark-mode .header-action-btn:hover {
  background: #475569;
  color: #e2e8f0;
}

.dark-mode .header-action-btn.active {
  background: #667eea;
  color: white;
}

.dark-mode .page-content {
  background: #0f172a;
}

.dark-mode .sub-navigation {
  background: #1e293b;
  border-bottom-color: #334155;
}

.dark-mode .sub-nav-tab {
  color: #94a3b8;
}

.dark-mode .sub-nav-tab:hover {
  background: #334155;
  color: #e2e8f0;
  border-color: #475569;
}

.dark-mode .sub-nav-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.dark-mode .settings-menu {
  background: #1e293b;
  border-color: #334155;
}

.dark-mode .settings-title {
  color: #e2e8f0;
}

.dark-mode .settings-section {
  border-bottom-color: #334155;
}

.dark-mode .settings-header {
  border-bottom-color: #334155;
}

.dark-mode .setting-label,
.dark-mode .group-label {
  color: #e2e8f0;
}

.dark-mode .style-option {
  background: #334155;
  border-color: #475569;
  color: #94a3b8;
}

.dark-mode .style-option:hover {
  background: #475569;
  border-color: #64748b;
}

.dark-mode .style-option.active {
  background: #667eea;
  border-color: #667eea;
  color: white;
}

.dark-mode .reset-button {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.2);
  color: #f87171;
}

.dark-mode .reset-button:hover {
  background: rgba(220, 38, 38, 0.2);
  border-color: rgba(220, 38, 38, 0.3);
}

.dark-mode .sub-submenu-item {
  color: #94a3b8;
}

.dark-mode .sub-submenu-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}

.dark-mode .sub-submenu-item.active {
  background: rgba(102, 126, 234, 0.2);
  color: #ffffff;
}

.dark-mode .sub-submenu-item.active::before {
  background: #667eea;
}

@media (prefers-color-scheme: dark) {
  .app-header {
    background: #1e293b;
    border-bottom-color: #334155;
    color: #e2e8f0;
  }

  .page-title {
    color: #e2e8f0;
  }

  .breadcrumb-item {
    color: #94a3b8;
  }

  .breadcrumb-item.active {
    color: #e2e8f0;
  }

  .sidebar-toggle {
    background: #334155;
    color: #94a3b8;
  }

  .sidebar-toggle:hover {
    background: #475569;
    color: #e2e8f0;
  }

  .header-action-btn {
    background: #334155;
    color: #94a3b8;
  }

  .header-action-btn:hover {
    background: #475569;
    color: #e2e8f0;
  }

  .page-content {
    background: #0f172a;
  }
}
</style>


